<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简设计 | 专注于创意</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            .fade-in {
                animation: fadeIn 0.8s ease forwards;
                opacity: 0;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-sans text-dark bg-light">
    <!-- 导航栏 -->
    <header class="fixed w-full top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-primary">极简设计</a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="#home" class="hover:text-primary transition-colors">首页</a>
                <a href="#work" class="hover:text-primary transition-colors">作品</a>
                <a href="#about" class="hover:text-primary transition-colors">关于</a>
                <a href="#contact" class="hover:text-primary transition-colors">联系</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menuBtn" class="md:hidden text-dark text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-primary transition-colors">首页</a>
                <a href="#work" class="py-2 hover:text-primary transition-colors">作品</a>
                <a href="#about" class="py-2 hover:text-primary transition-colors">关于</a>
                <a href="#contact" class="py-2 hover:text-primary transition-colors">联系</a>
            </div>
        </div>
    </header>

    <!-- 主视觉区 -->
    <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6 fade-in" style="animation-delay: 0.1s">
                    用创意设计<br>塑造品牌价值
                </h1>
                <p class="text-lg md:text-xl text-gray-600 mb-10 fade-in" style="animation-delay: 0.3s">
                    我们专注于品牌设计、UI/UX设计和创意营销，为客户打造独特且有影响力的视觉体验。
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="animation-delay: 0.5s">
                    <a href="#work" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-colors font-medium">
                        查看作品
                    </a>
                    <a href="#contact" class="border border-gray-300 hover:border-primary hover:text-primary px-8 py-3 rounded-lg transition-colors font-medium">
                        联系我们
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品展示 -->
    <section id="work" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">精选作品</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们为各行业客户打造的创意设计作品，每一个项目都凝聚了我们的创意与心血。</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 作品1 -->
                <div class="rounded-xl overflow-hidden shadow-md hover-lift">
                    <img src="https://picsum.photos/id/1/600/400" alt="品牌设计作品" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">品牌视觉识别系统</h3>
                        <p class="text-gray-600 mb-4">为科技初创公司设计的全套品牌识别系统，包括LOGO、色彩和应用规范。</p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 作品2 -->
                <div class="rounded-xl overflow-hidden shadow-md hover-lift">
                    <img src="https://picsum.photos/id/20/600/400" alt="APP设计作品" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">健康应用UI设计</h3>
                        <p class="text-gray-600 mb-4">为健康管理应用设计的用户界面，注重用户体验和视觉美感的平衡。</p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 作品3 -->
                <div class="rounded-xl overflow-hidden shadow-md hover-lift">
                    <img src="https://picsum.photos/id/26/600/400" alt="包装设计作品" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">有机食品包装设计</h3>
                        <p class="text-gray-600 mb-4">为有机食品品牌设计的系列包装，体现自然、健康的品牌理念。</p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                    查看更多作品 <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 服务介绍 -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">我们的服务</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">提供全方位的创意设计服务，满足您不同阶段的品牌需求。</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- 服务1 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-paint-brush text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">品牌设计</h3>
                    <p class="text-gray-600">包括LOGO设计、视觉识别系统、品牌手册等，打造独特且一致的品牌形象。</p>
                </div>
                
                <!-- 服务2 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-desktop text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">UI/UX设计</h3>
                    <p class="text-gray-600">为网站和移动应用提供用户界面设计和用户体验优化，提升产品易用性。</p>
                </div>
                
                <!-- 服务3 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-bullhorn text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">创意营销</h3>
                    <p class="text-gray-600">包括海报设计、社交媒体素材、宣传册等，助力品牌传播和营销活动。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <img src="https://picsum.photos/id/1070/600/700" alt="我们的团队" class="w-full h-auto rounded-xl shadow-md">
                </div>
                
                <div>
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-6">关于我们</h2>
                    <p class="text-gray-600 mb-4">极简设计成立于2015年，是一支由设计师、策略师和创意人员组成的专业团队。</p>
                    <p class="text-gray-600 mb-6">我们相信好的设计不仅要有吸引力，还要有功能性和目的性。通过深入了解客户需求和市场环境，我们创造出既美观又实用的设计解决方案。</p>
                    
                    <div class="grid grid-cols-2 gap-6 mb-8">
                        <div>
                            <p class="text-3xl font-bold text-primary mb-1">500+</p>
                            <p class="text-gray-600">完成项目</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-primary mb-1">100+</p>
                            <p class="text-gray-600">满意客户</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-primary mb-1">15+</p>
                            <p class="text-gray-600">行业经验</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-primary mb-1">20+</p>
                            <p class="text-gray-600">设计奖项</p>
                        </div>
                    </div>
                    
                    <a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-colors font-medium">
                        联系我们
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户评价 -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">客户评价</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说，他们的成功是我们最大的动力。</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 评价1 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="flex text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"极简设计为我们打造的品牌形象非常出色，不仅视觉上吸引人，而且准确传达了我们的品牌价值观。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1012/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold">陈先生</h4>
                            <p class="text-gray-500 text-sm">科技公司 CEO</p>
                        </div>
                    </div>
                </div>
                
                <!-- 评价2 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="flex text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"与极简设计合作非常愉快，他们的专业素养和创意能力令人印象深刻，交付的设计作品超出了我们的预期。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1027/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold">李女士</h4>
                            <p class="text-gray-500 text-sm">电商平台 市场总监</p>
                        </div>
                    </div>
                </div>
                
                <!-- 评价3 -->
                <div class="bg-white p-8 rounded-xl shadow-sm hover-lift">
                    <div class="flex text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"极简设计不仅提供了优秀的设计方案，还在项目过程中给予了我们很多有价值的建议，帮助我们更好地定位品牌。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1025/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold">王先生</h4>
                            <p class="text-gray-500 text-sm">餐饮连锁 创始人</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">联系我们</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">有任何问题或合作意向，欢迎随时联系我们，我们将尽快回复您。</p>
                </div>
                
                <div class="grid md:grid-cols-5 gap-8">
                    <div class="md:col-span-2">
                        <div class="bg-gray-50 p-8 rounded-xl h-full">
                            <h3 class="text-xl font-bold mb-6">联系方式</h3>
                            
                            <div class="space-y-6">
                                <div class="flex items-start">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-4 mt-1">
                                        <i class="fa fa-map-marker"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">地址</h4>
                                        <p class="text-gray-600">上海市静安区南京西路1266号恒隆广场28楼</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-4 mt-1">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">电话</h4>
                                        <p class="text-gray-600">021-12345678</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-4 mt-1">
                                        <i class="fa fa-envelope"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">邮箱</h4>
                                        <p class="text-gray-600">contact@jijiansheji.com</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-4 mt-1">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">工作时间</h4>
                                        <p class="text-gray-600">周一至周五 9:00-18:00</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-8">
                                <h4 class="font-medium mb-4">关注我们</h4>
                                <div class="flex space-x-4">
                                    <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-full flex items-center justify-center text-primary transition-colors">
                                        <i class="fa fa-weixin"></i>
                                    </a>
                                    <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-full flex items-center justify-center text-primary transition-colors">
                                        <i class="fa fa-weibo"></i>
                                    </a>
                                    <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-full flex items-center justify-center text-primary transition-colors">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                    <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-full flex items-center justify-center text-primary transition-colors">
                                        <i class="fa fa-behance"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-3">
                        <form>
                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                    <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的姓名">
                                </div>
                                <div>
                                    <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                                    <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的邮箱">
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                                <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入主题">
                            </div>
                            
                            <div class="mb-6">
                                <label for="message" class="block text-gray-700 font-medium mb-2">留言</label>
                                <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的留言内容"></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors">
                                发送留言
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8 mb-12">
                <div class="md:col-span-2">
                    <a href="#" class="text-2xl font-bold text-white mb-6 inline-block">极简设计</a>
                    <p class="text-gray-400 max-w-md mb-6">我们专注于品牌设计、UI/UX设计和创意营销，为客户打造独特且有影响力的视觉体验。</p>
                    <p class="text-gray-500">© 2023 极简设计 版权所有</p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#work" class="text-gray-400 hover:text-white transition-colors">作品</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">服务</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">品牌设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">创意营销</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站设计</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full shadow-md flex items-center justify-center opacity-0 invisible transition-all z-50">
        <i class="fa fa-chevron-up"></i>
    </button>

    <script>
        // 移动端菜单切换
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            // 切换图标
            const icon = menuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动菜单（如果打开）
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        const icon = menuBtn.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });
        
        // 返回顶部按钮
        const backToTopBtn = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.add('opacity-0', 'invisible');
                backToTopBtn.classList.remove('opacity-100', 'visible');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 滚动动画
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const fadeInObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });
        
        fadeElements.forEach(element => {
            fadeInObserver.observe(element);
        });
    </script>
</body>
</html>